import { Component } from 'react'
import { View, Form, Input, Button, Text, Map } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import QQMapWX from '../../../utils/qqmap-wx-jssdk'
import mapConfig from '../../../config/map.config'

import './index.less'

@inject('store')
@observer
class EditDestination extends Component {
    state = {
        name: '',
        description: '',
        location: ''
    }

    componentDidMount() {
        const { id } = Taro.getCurrentInstance().router.params
        const { destinationsStore } = this.props.store
        const destination = destinationsStore.getDestinationById(id)

        if (destination) {
            this.setState({
                name: destination.name,
                description: destination.description || '',
                location: destination.location
            })
        }
    }

    handleInput = (field, e) => {
        this.setState({
            [field]: e.target.value
        })
    }

    handleSubmit = () => {
        const { id } = Taro.getCurrentInstance().router.params
        const { destinationsStore } = this.props.store
        const { name, description, location } = this.state

        if (!name || !location) {
            Taro.showToast({
                title: '请填写目的地名称和位置',
                icon: 'none'
            })
            return
        }

        destinationsStore.updateDestination(id, {
            name,
            description,
            location
        })

        Taro.showToast({
            title: '更新成功',
            icon: 'success'
        })

        Taro.navigateBack()
    }

    render() {
        const { name, description, location } = this.state

        return (
            <View className='edit-destination'>
                <Form onSubmit={this.handleSubmit}>
                    <View className='form-item'>
                        <Text className='label'>目的地名称</Text>
                        <Input
                            className='input'
                            value={name}
                            onInput={e => this.handleInput('name', e)}
                            placeholder='请输入目的地名称'
                        />
                    </View>

                    <View className='form-item'>
                        <Text className='label'>位置</Text>
                        <Input
                            className='input'
                            value={location}
                            onInput={e => this.handleInput('location', e)}
                            placeholder='请输入位置'
                        />
                    </View>

                    <View className='form-item'>
                        <Text className='label'>描述</Text>
                        <Input
                            className='input'
                            value={description}
                            onInput={e => this.handleInput('description', e)}
                            placeholder='请输入描述（选填）'
                        />
                    </View>

                    <Button className='submit-btn' formType='submit'>
                        保存修改
                    </Button>
                </Form>
            </View>
        )
    }
}

export default EditDestination